<template>
  <div class="taskInfo">
    <div class="taskInfo-top">
      <div class="taskInfo-top-tittle" v-if="props.title">行政许可审批</div>
    </div>
    <div class="taskInfo-body">
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">任务信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-descriptions
            bordered
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
          >
            <a-descriptions-item label="任务编号" :span="1" v-if="taskData?.taskNo">{{
              taskData?.taskNo
            }}</a-descriptions-item>
            <a-descriptions-item label="检查类型" :span="1" v-if="taskData?.checkTypeName">{{
              taskData?.checkTypeName
            }}</a-descriptions-item>
            <a-descriptions-item label="任务状态" :span="1" v-if="taskData?.taskStatus">{{
              caseTaskStatus(taskData?.taskStatus)
            }}</a-descriptions-item>
            <a-descriptions-item label="主办人" :span="1" v-if="taskData?.checkerName">{{
              taskData?.checkerName
            }}</a-descriptions-item>
            <a-descriptions-item label="协办人" :span="1" v-if="taskData?.organizerName">{{
              taskData?.organizerName
            }}</a-descriptions-item>
            <a-descriptions-item label="检查时间" :span="1" v-if="taskData?.endCheckTime">{{
              taskData?.endCheckTime
            }}</a-descriptions-item>
            <a-descriptions-item label="检查结果" :span="1" v-if="taskData?.checkResult">
              <div :class="caseCheckResultClass(taskData?.checkResult)">
                {{ caseCheckResult(taskData?.checkResult) }}</div
              ></a-descriptions-item
            >
            <a-descriptions-item
              label="不合格原因"
              :span="1"
              v-if="taskData?.checkResult == 2 && taskData?.remark"
            >
              {{ taskData?.remark }}</a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">单位信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-descriptions
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
            bordered
          >
            <a-descriptions-item label="单位名称" :span="2">{{
              taskData?.openPlaceInfo.placeName
            }}</a-descriptions-item>
            <a-descriptions-item label="所属地址" :span="1">{{
              taskData?.openPlaceInfo.address
            }}</a-descriptions-item>
            <a-descriptions-item label="场所类型" :span="3">{{
              taskData?.openPlaceInfo.locationTypeName
            }}</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="taskInfo-body-box" v-if="taskData?.taskStatus != 1 && taskData?.taskStatus != 2">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">检查信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <div v-for="(item, index) in ruleItemRespList">
            <a-collapse v-model:activeKey="activeKey" expandIconPosition="end">
              <template #expandIcon="{ isActive }">
                <div style="color: rgba(15, 83, 172, 1)">
                  <span>展开</span>
                  <RightOutlined :rotate="isActive ? 90 : 0" />
                </div>
              </template>
              <a-collapse-panel :key="index" :header="item.name" :style="customStyle">
                <div v-if="item.detailList">
                  <div>
                    <a-descriptions
                      :labelStyle="{ width: '160px' }"
                      :content-style="{ color: '#444444' }"
                      bordered
                    >
                      <a-descriptions-item label="重要事项" :span="1" v-if="item.detailList">
                        <div v-for="items in item.detailList">
                          <a-checkbox
                            :checked="caseChecked(items.ruleId)"
                            :value="items.checkItem"
                            disabled
                          >
                            <span style="color: #444444">{{ items.checkItem }}</span>
                          </a-checkbox>
                        </div>
                      </a-descriptions-item>
                      <a-descriptions-item label="其他事项" :span="1" v-if="item.others">
                        {{ item.others }}
                      </a-descriptions-item>
                      <a-descriptions-item label="具体情形" :span="1" v-if="item.specific">
                        {{ item.specific }}
                      </a-descriptions-item>
                      <a-descriptions-item label="抽查部位" :span="1" v-if="item.spot">
                        {{ item.spot }}
                      </a-descriptions-item>
                    </a-descriptions>
                  </div>
                </div>
                <div v-if="item.childList">
                  <div v-for="(child, index) in item.childList" class="custom">
                    <a-collapse v-model:activeKey="activeKe2" expandIconPosition="end">
                      <a-collapse-panel :key="index" :header="child.name" :style="customStyle2">
                        <div>
                          <a-descriptions
                            :labelStyle="{ width: '160px' }"
                            :content-style="{ color: '#444444' }"
                            bordered
                          >
                            <a-descriptions-item label="重要事项" :span="2" v-if="child.detailList">
                              <div v-for="itemss in child.detailList">
                                <a-checkbox
                                  :checked="caseChecked(itemss.ruleId)"
                                  :value="itemss.checkItem"
                                  disabled
                                >
                                  <span style="color: #444444">{{ itemss.checkItem }}</span>
                                </a-checkbox>
                              </div>
                            </a-descriptions-item>
                            <a-descriptions-item label="其他事项" :span="1" v-if="child.others">
                              {{ child.others }}
                            </a-descriptions-item>
                            <a-descriptions-item label="具体情形" :span="2" v-if="child.specific">
                              {{ child.specific }}
                            </a-descriptions-item>
                            <a-descriptions-item label="抽查部位" :span="1" v-if="child.spot">
                              {{ child.spot }}
                            </a-descriptions-item>
                          </a-descriptions>
                        </div>
                      </a-collapse-panel>
                    </a-collapse>
                  </div>
                </div>
              </a-collapse-panel>
            </a-collapse>
          </div>
        </div>
      </div>
      <div v-if="taskData?.photoList || taskData?.enterpriserSign || taskData?.checkerSign">
        <a-descriptions
          :labelStyle="{ width: '160px' }"
          :content-style="{ color: '#444444' }"
          bordered
        >
          <a-descriptions-item label="场所照片" :span="3" v-if="taskData?.photoList">
            <a-image-preview-group>
              <a-space>
                <a-image
                  v-for="(item, index) in photoList"
                  :key="index"
                  :width="80"
                  :height="80"
                  :style="{ borderRadius: '4px' }"
                  :src="item"
              /></a-space>
            </a-image-preview-group>
          </a-descriptions-item>
          <a-descriptions-item label="检查员签字" :span="2" v-if="taskData?.checkerSign">
            <a-space>
              <a-button type="link" style="color: #1764ce" @click="() => setVisible(true)"
                >查看签名</a-button
              >
              <a-button type="link" style="color: #1764ce" @click="() => setVisibles(true)"
                >查看签名</a-button
              >
            </a-space>

            <a-image
              :width="200"
              :style="{ display: 'none' }"
              :preview="{
                visible: visible,
                onVisibleChange: setVisible,
              }"
              :src="checkerSign[0]"
            />
            <a-image
              :width="200"
              :style="{ display: 'none' }"
              :preview="{
                visible: visibles,
                onVisibleChange: setVisibles,
              }"
              :src="checkerSign[1]"
            />
          </a-descriptions-item>
          <a-descriptions-item
            label="被检查单位随同人员签字"
            :span="1"
            v-if="taskData?.enterpriserSign"
          >
            <a-button type="link" style="color: #1764ce" @click="() => setVisibless(true)"
              >查看签名</a-button
            >
            <a-image
              :width="200"
              :style="{ display: 'none' }"
              :preview="{
                visible: visibless,
                onVisibleChange: setVisibless,
              }"
              :src="enterpriserSign"
            />
          </a-descriptions-item>
          <a-descriptions-item label="备注" :span="3" v-if="taskData?.remark">
            {{ taskData?.remark }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { ref, onMounted } from 'vue';
  import { taskInfo } from '@/api/administrative';
  import { RightOutlined } from '@ant-design/icons-vue';
  import { bindFileUrl } from '@/api/account';
  const route = useRoute();
  defineOptions({
    name: 'taskInfo',
  });

  const visible = ref<boolean>(false);
  const visibles = ref<boolean>(false);
  const visibless = ref<boolean>(false);
  const setVisible = (value): void => {
    visible.value = value;
  };
  const setVisibles = (value): void => {
    visibles.value = value;
  };
  const setVisibless = (value): void => {
    visibless.value = value;
  };

  interface PropsInfo {
    id: any;
    title: boolean;
  }
  const props = withDefaults(defineProps<PropsInfo>(), {
    id: '',
    title: true,
  });

  const taskData = ref();
  const ruleItemRespList = ref();
  const detailList = ref();
  const activeKey = ref(['0']);
  const activeKe2 = ref(['0']);
  const customStyle = 'background: #FFFFFF;border-radius: 4px;margin-bottom: 12px;overflow: hidden';
  const customStyle2 = 'background: #FAFAFA;border: 0;overflow: hidden';

  const caseTaskStatus = (val) => {
    switch (val) {
      case 1:
        return '未开始';
      case 2:
        return '进行中';
      case 3:
        return '待审批';
      // case 4:
      //   return '技术复核';
      // case 5:
      //   return '文书制作';
      case 6:
        return '送达回证';
      case 7:
        return '已结束';
      default:
        break;
    }
  };

  const caseCheckResult = (val) => {
    switch (val) {
      case 1:
        return '合格';
      case 2:
        return '不合格';
      default:
        return '-';
    }
  };

  const caseCheckResultClass = (val) => {
    switch (val) {
      case 1:
        return 'checkBox1';
      case 2:
        return 'checkBox2';
      default:
        return '';
    }
  };

  const caseChecked = (val) => {
    switch (val) {
      case '0':
        return false;
      case '1':
        return true;
      default:
        break;
    }
  };

  const photoList = ref([] as any);
  const checkerSign = ref([] as any);
  const enterpriserSign = ref('');

  onMounted(async () => {
    async function fetchData(url) {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Network response was not ok: ${response.statusText}`);
        }
        const data = await response.text(); // 或者使用 response.text() 或其他适当的方法

        return data;
      } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
      }
    }
    if (props.id) {
      const data = await taskInfo(props.id);
      taskData.value = data;
      ruleItemRespList.value = data.ruleItemRespList;
      if (taskData.value.photoList?.length) {
        taskData.value.photoList.map((item) => {
          bindFileUrl(item).then((res) => {
            photoList.value.push(res);
          });
        });
      }
      if (taskData.value.checkerSign) {
        taskData.value.checkerSign.split(',').map((item) => {
          bindFileUrl(item).then((res) => {
            let url = fetchData(res);
            Promise.all([url]).then((values) => {
              checkerSign.value.push(values[0]);
            });
          });
        });
        console.log('checkerSign.value', checkerSign.value);
      }
      if (taskData.value.enterpriserSign) {
        bindFileUrl(taskData.value.enterpriserSign).then((res) => {
          let url = fetchData(res);
          Promise.all([url]).then((values) => {
            enterpriserSign.value = values[0] as string;
          });
        });
      }
    }
  });
</script>
<style lang="less" scoped>
  .taskInfo {
    background-color: rgba(255, 255, 255, 1);
    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-body {
      &-box {
        margin-bottom: 16px;
        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0 13px 0;
          &-left {
            border: 1px solid #0f53ac;
            margin-right: 7px;
            border-radius: 4px;
            height: 14px;
          }

          &-right {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(68, 68, 68, 1);
          }
        }

        &-info {
          :global(.ant-descriptions-item-label) {
            width: 160px;
          }

          :global(.ant-collapse .ant-collapse-content) {
            border-top: 1px solid #f0f0f0;
          }

          .ant-collapse {
            border: 1px solid #f0f0f0;
            border-bottom: 0;
          }

          .custom {
            .ant-collapse {
              border: 1px solid #f0f0f0;
              border-bottom: 0;
              border-radius: 0;
            }
          }

          .custom:first-child {
            .ant-collapse {
              border-radius: 4px 4px 0 0;
            }
          }
          .custom:last-child {
            .ant-collapse {
              border-bottom: 1px solid #f0f0f0;
              border-radius: 0 0 4px 4px;
            }
          }
          .ant-collapse .ant-collapse-item {
            border-bottom: 1px solid #f0f0f0;
          }
          .ant-collapse .ant-collapse-content {
            border-top: 1px solid #f0f0f0;
          }
        }
      }
    }
    .bottomBox {
      height: 60px;
    }
    .bottomBtns {
      width: calc(100% - 240px);
      padding: 8px 20px;
      background: rgba(255, 255, 255, 1);
      border-top: 1px solid rgba(240, 240, 240, 1);
      position: fixed;
      bottom: 0;
      text-align: right;
    }

    .checkBox1 {
      width: 52px;
      height: 24px;
      font-size: 12px;
      background: #ebf8e5;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      color: #09b840;
    }
    .checkBox2 {
      width: 52px;
      height: 24px;
      font-size: 12px;
      background: #fff2f0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      color: #ff4d4f;
    }
  }
</style>
